<!--**
* @author: SEKin
* @Date: 2024-11-12
* @description:  键值对输入组件
* @Last Modified time:
*-->
<template>
  <!--备注-->
  <FormItem name="elParams">
    <template #label>
      <span>
        {{ isElParams ? 'el入参' : 'param入参' }}
      </span>
      <span class="add" @click="eventHandle.add" title="新增">
        <i class="fa fa-add-linear"></i
      ></span>
    </template>
    <div v-if="data && data.length">
      <div class="row-item" v-for="(item, i) in data" :key="i">
        <div
          class="inp-require inp-wrap first"
          :class="{ unfill: !item[fieldName[0]] }"
        >
          <Input
            :allowClear="isElParams ? undefined : true"
            :disabled="isElParams"
            placeholder="参数值"
            v-model:value="item[fieldName[0]] as string"
          />
        </div>
        <div
          class="inp-require inp-wrap last"
          :class="{ unfill: !item[fieldName[1]] }"
        >
          <Input
            allowClear
            placeholder="参数名称"
            v-model:value="item[fieldName[1]] as string"
          />
        </div>
        <span
          v-if="isElParams ? i == data.length - 1 : true"
          class="del"
          :data-index="i"
          @click="eventHandle.del"
          ><i class="fa fa-lessen"></i
        ></span>
      </div>
    </div>
    <div v-else style="padding-left: 2em; color: var(--textColorSide)">
      -点击新增参数-
    </div>
  </FormItem>
</template>
<script setup lang="ts">
import { Input, FormItem } from 'ant-design-vue';
import { IRuleNode } from 'apis/src/users/rule';
import { AnySomeObj, numStr } from 'commons/src/common';

/**
 *@description 常数区
 */

/**
 *@description 属性定义区
 */
type Props = {
  data: AnySomeObj<
    keyof (IRuleNode['elParams'][0] & IRuleNode['paramParams'][0])
  >[];
  isElParams?: boolean;
  ruleId?: numStr;
};

const props = defineProps<Props>();
const fieldName = (
  props.isElParams ? ['elParams', 'elName'] : ['paramParams', 'paramName']
) as ['elParams', 'elName'];

/**
 *@description 状态保存区
 */

/**
 *@description 方法区
 */

/**
 *@description 数据变更区
 */
const eventHandle = {
  add() {
    const data = props.data;
    const ruleId = props.ruleId;
    const obj = {
      ruleId,
      [fieldName[0]]: props.isElParams ? data.length + 1 : '',
      [fieldName[1]]: '',
    };
    data.push(obj);
  },
  del(e: MouseEvent) {
    const data = props.data;
    const index = (e.currentTarget as HTMLElement).dataset.index;
    data.splice(+index!, 1);
  },
};
/**
 *@description 组件导出区
 */
</script>
<style lang="scss" scoped>
.row-item {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
  &:last-child {
    margin-bottom: 0;
  }
}
.inp-wrap {
  &.last {
    width: 53%;
    margin: 0 1em;
  }
  &.first {
    width: 40%;
  }
}
.del {
  color: red;
}

.fa {
  cursor: pointer;
}

.add {
  color: var(--themeColor);
  margin-left: 0.5em;
  .fa {
    font-size: 20px;
  }
}
</style>
